<template>
  <div class="table">
    <!-- 头部搜索   -->
    <div class="search-wrap">
      <el-select slot="prepend" v-model="shopId" style="width: 200px;" placeholder="店铺" @change="changeShop">
        <el-option v-for="(item, index) in shopList" :label="item.name" :value="item.shopId" :key="index"></el-option>
      </el-select>
      <el-input
        placeholder="请输入需要搜索的商品名称"
        prefix-icon="el-icon-search"
        style="margin-left: 400px;display:inline-block;width: 300px"
        v-model="goodsName"
        @change="searchGoods"
      >
      </el-input>
    </div>
    <el-container>
      <!-- 侧边栏   -->
      <el-aside width="220px" class="aside-nav">
        <avue-tree
          :option="option"
          :data="goodsCategories"
          @node-click="getCategoryGoods"
        >
        </avue-tree>
      </el-aside>
      <!-- 表格区域   -->
      <el-main class="main">
        <avue-crud ref="crud" :data="tableData" :option="tableoption">
          <template slot-scope="scope" slot="handle">
            <el-button type="text" size="small" @click="bindSupply(scope.row)">确定</el-button>
          </template>
        </avue-crud>
      </el-main>
    </el-container>
    <el-footer style="margin-top: 5px">
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage" :page-sizes="[10, 20, 40, 60]" :page-size="10"
                       background :layout="layout" :total="totalCount">
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>

<script>
  import {getStore} from "@/util/store"
  import {fetchList} from "@/api/manage/shop";
  import {getgoodslist} from "@/api/supply/supply_goods_info"
  import {bindTableOption} from '@/const/crud/supply/suppliergoods'
  import {getCategoryTree} from "@/api/goods/goodscategory";

  export default {
    name: "supplyBind",
    data() {
      return {
        pmId: '',
        shopId: '',
        categoryId: '',
        currentPage: 1,
        pageSize: 10,
        layout: "total, sizes, prev, pager, next, jumper",
        totalCount: 10,
        useStatus: "2",
        goodsCategories: [],
        shopList: [],
        goodsName: '',
        tableData: [],
        tableoption: bindTableOption,
        option: {
          defaultExpandAll:true,
          addBtn: false,
          props:{
            label: 'name',
            value: 'id',
            children: 'children'
          }
        }
      }
    },
    props: {
      supplyShopId: {
        type: String,
        default() {
          return "";
        }
      },
      supplyGoodsId: {
        type: String,
        default() {
          return "";
        }
      },
      supplyModelId: {
        type: String,
        default() {
          return "";
        }
      }
    },
    created() {
      this.pmId = getStore({name: "pmId"});
      this.getFetchList()
    },
    methods: {
      //获取店铺列表
      getFetchList() {
        let params = {
          current: 1,
          size: 100,
          merchantId: this.pmId,
          status: this.useStatus
        }
        fetchList(params).then(res => {
          // console.log(res.data.data.records);
          this.shopList = res.data.data.records
          this.shopId = this.shopList[0].shopId
          this.getGoodsCategoryList()
          this.getGoodsList()
        })
      },
      //获取商品
      getGoodsList(params) {
        params = {
          current: this.currentPage,
          size: this.pageSize,
          shopId: this.shopId,
          categoryId: this.categoryId,
          goodsName: this.goodsName
        }
        getgoodslist(params).then(res => {
          // console.log(res.data.data);
          this.totalCount = res.data.data.total
          this.tableData = res.data.data.records
        })
      },
      // 获取商品分类列表
      getGoodsCategoryList(param = {}) {
        getCategoryTree({shopId: this.shopId}).then(res => {
          // console.log(res.data.data);
          this.goodsCategories = res.data.data
        })
      },
      // 获取分类商品
      getCategoryGoods(categoryId) {
        // console.log(categoryId);
        const params = {}
        params.current = this.currentPage
        this.categoryId = categoryId.id
        this.getGoodsList(params)
      },
      //选店铺获取商品
      changeShop() {
        this.categoryId = ''
        this.getGoodsList()
        this.getGoodsCategoryList()
      },
      //搜索商品
      searchGoods(val) {
        this.goodsName = val
        this.getGoodsList()
      },
      //绑定操作
      bindSupply(val) {
        this.$emit('selectGoods',val)
      },
      //分页——跳转页
      handleSizeChange(size) {
        this.pageSize = size
        this.getGoodsList()
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.getGoodsList()
      }
    }
  }
</script>

<style scoped>
  .search-wrap {
    text-align: left;
    margin-top: 5px;
  }
  .main {
    margin-top: 20px;
  }
  .aside-nav {
    height: calc(100vh - 355px);
    text-align: left;
    margin-top: 20px;
  }
</style>
